<template>
  <div class="cart">
    <van-swipe-cell v-for="item in $store.state.cart.list" :key="item.id">
      <van-card
        class="goods-card"
        :price="item.price * item.num | fix"
        :title="item.title"
      >
        <template #thumb>
          <van-checkbox
            :style="{ marginRight: '5px', width: '30px' }"
            :value="item.checked"
            @click="handleChange(item.id)"
          ></van-checkbox>
          <div class="van-image" style="width: 100%; height: 100%">
            <img
              :src="item.image"
              class="van-image__img"
              style="object-fit: cover"
            />
          </div>
        </template>

        <template #num>
          <van-stepper @change="handleChangeNum($event,item.id)" :value="item.num"  button-size="22" />
        </template>
      </van-card>
      <template #right>
        <van-button @click="handleRemove(item.id)" square text="删除" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <van-empty
    v-if="this.$store.state.cart.list.length===0"
    :style="{height:'700px'}"
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车里啥都没有"
    />

    <van-submit-bar  @submit="onSubmit"  label='合计(不含运费):'  :price="Money" button-color='rgb(26,188,156)' button-text="去结算">
      <van-checkbox @click="handleCheckedAll" :value="allChecked">全选</van-checkbox>
      <template #tip>
        这里应该有一个文本,但不知道放什么
        <span>。就随便写点东西吧</span>
      </template>
      <template #button>
        <van-button
        :disabled="!Money"
          :style="{
            height: '100%',
            width: '120px',
            marginRight: '-16px',
            backgroundColor: '#1abc9c',
          }"
          type="primary"
          @click="onSubmit"
          >去结算</van-button
        >
      </template>
    </van-submit-bar >
  </div>
</template>

<script>
export default {
  name: 'cart',
  methods: {
    handleRemove(id) {
      this.$store.commit('cart/removeCart', { id })
    },
    handleChangeNum(num, id) {
      this.$store.commit('cart/changeCartNum', { num, id })
    },
    handleChange(id) {
      this.$store.commit('cart/changeChecked', { id })
    },
    handleCheckedAll() {
      this.$store.commit('cart/changeAllChecked', { checked: !this.allChecked })
    },
    onSubmit() {
      if (this.hasAddress === 0) {
        this.$toast({
          type: 'fail',
          message: '还没有收货人呢',
        })
        setTimeout(() => {
          this.$router.push('/add')
        }, 1000)
      } else {
        localStorage.setItem('money', JSON.stringify(this.Money / 100))
        this.$router.push('/placeorder')
      }
    },
  },
  computed: {
    allChecked() {
      if (this.$store.state.cart.list.length === 0) {
        return false
      } else {
        return this.$store.getters['cart/allChecked']
      }
    },
    Money() {
      return this.$store.getters['cart/totalMoney']
    },
    hasAddress() {
      return this.$store.state.address.addressInfo.length
    },
  },
}
</script>

<style lang="scss" scoped>
.cart {
  background-color: rgb(249, 249, 249);
  height: 680px;
  padding-bottom: 76px;
}
.van-swipe-cell {
  margin-bottom: 10px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card__thumb {
  display: flex;
  width: 140px;
}

.van-image {
  width: 100px !important;
  height: 100px !important;

  .van-image__img {
    width: 95px;
    height: 95px;
  }
}
.custom-image .van-empty__image {
  width: 90px;
  height: 90px;
}

.van-submit-bar__text{
  >span{
    font-size: 12px;
  }
}
</style>
